<!DOCTYPE HTML>

<link href="jquery-ui-1.9.0.custom.css" type="text/css" rel="stylesheet" />
<link href="jquery-ui-1.9.0.custom.min.css" type="text/css" rel="stylesheet" />
<script src='jquery-1.8.2.js'' type='text/javascript'></script>
<script src='jquery-ui-1.9.0.custom.js' type='text/javascript'></script>
<script src='jquery-ui-1.9.0.custom.min.js' type='text/javascript'></script>

<style type="text/css">
    body{
        background-color: black;
    }
</style>



<html>
<head>
    <meta charset="utf-8">
    <title>Shuffle Board</title>
</head>
<body>
<div align="center" style="margin-top: 200px;">
    <table style="border-style: solid;border-color: white; height: 300px; width: 300px;">
            <tr>
                <th>
                    <label  id="opener" style="color: white; text-align:center;" align="center"><u>Jugador</u></label>
                </th>
                <td>
                        <div align="center" id="opener2">
                        <img src="shuffleboard.png">
                        </div>      
                </td>
            </tr>            
    </table>
</div>

<div id="dialog" title="Jugador">
                <label>Nombre: </label>
                <input type="text" id="nombre"><br>
                <label>Correo: </label>
                <input type="text" id="correo"><br>
                <label>Nick: </label>
                <input type="text" id="nick"><br><br>
                <div align="center">
                <button id="confirmar" style="height: 40px;width: 100px;">Aceptar</button>
                </div>
</div>

</body>
</html>

<script type="text/javascript">
    // increase the default animation speed to exaggerate the effect

    $(document).ready(function(){

        $("#confirmar").click(function(){
            $.ajax({
                url:"jugar.html",
                type: "POST",
                data:{
                    'nombre':$("#nombre").val(),
                    'correo':$("#correo").val(),
                    'nick':$("#nick").val()
                },
                success: function(msg){
                    var respuesta = eval('(' + msg + ')');
                    alert(respuesta.mensaje);
                },
                error: function(){
                    alert("Error");
                }
            });
        });
        $.fx.speeds._default = 300;
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: true,
                show: "fold",
                hide: "explode",
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );
                return false;
            });

        });

        $(function() {
            $( "input[type=submit], a, button" )
                    .button()
                    .click(function( event ) {
                        event.preventDefault();
                    });
        });

    });


</script>

